<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-emoji"></i> 自定义图标
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <h2>使用方法</h2>
            <p style="line-height: 50px;">直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如：（共{{iconList.length}}个图标）</p>
            <p class="example-p">
                <i class="el-icon-lx-redpacket_fill" style="font-size: 30px;color: #ff5900"></i>
                <span>&lt;i class=&quot;el-icon-lx-redpacket_fill&quot;&gt;&lt;/i&gt;</span>
            </p>
            <p class="example-p">
                <i class="el-icon-lx-weibo" style="font-size: 30px;color:#fd5656"></i>
                <span>&lt;i class=&quot;el-icon-lx-weibo&quot;&gt;&lt;/i&gt;</span>
            </p>
            <p class="example-p">
                <i class="el-icon-lx-emojifill" style="font-size: 30px;color: #ffc300"></i>
                <span>&lt;i class=&quot;el-icon-lx-emojifill&quot;&gt;&lt;/i&gt;</span>
            </p>
            <br />
            <h2>图标</h2>
            <div class="search-box">
                <el-input class="search" size="large" v-model="keyword" clearable placeholder="请输入图标名称"></el-input>
            </div>
            <ul>
                <li class="icon-li" v-for="(item,index) in list" :key="index">
                    <div class="icon-li-content">
                        <i :class="`el-icon-lx-${item}`"></i>
                        <span>{{item}}</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { computed, ref } from "vue";
export default {
    name: "icon",
    setup() {
        const iconList = [
            "attentionforbid",
            "attentionforbidfill",
            "attention",
            "attentionfill",
            "tag",
            "tagfill",
            "people",
            "peoplefill",
            "notice",
            "noticefill",
            "mobile",
            "mobilefill",
            "voice",
            "voicefill",
            "unlock",
            "lock",
            "home",
            "homefill",
            "delete",
            "deletefill",
            "notification",
            "notificationfill",
            "notificationforbidfill",
            "like",
            "likefill",
            "comment",
            "commentfill",
            "camera",
            "camerafill",
            "warn",
            "warnfill",
            "time",
            "timefill",
            "location",
            "locationfill",
            "favor",
            "favorfill",
            "skin",
            "skinfill",
            "news",
            "newsfill",
            "record",
            "recordfill",
            "emoji",
            "emojifill",
            "message",
            "messagefill",
            "goods",
            "goodsfill",
            "crown",
            "crownfill",
            "move",
            "add",
            "hot",
            "hotfill",
            "service",
            "servicefill",
            "present",
            "presentfill",
            "pic",
            "picfill",
            "rank",
            "rankfill",
            "male",
            "female",
            "down",
            "top",
            "recharge",
            "rechargefill",
            "forward",
            "forwardfill",
            "info",
            "infofill",
            "redpacket",
            "redpacket_fill",
            "roundadd",
            "roundaddfill",
            "friendadd",
            "friendaddfill",
            "cart",
            "cartfill",
            "more",
            "moreandroid",
            "back",
            "right",
            "shop",
            "shopfill",
            "question",
            "questionfill",
            "roundclose",
            "roundclosefill",
            "roundcheck",
            "roundcheckfill",
            "global",
            "mail",
            "punch",
            "exit",
            "upload",
            "read",
            "file",
            "link",
            "full",
            "group",
            "friend",
            "profile",
            "addressbook",
            "calendar",
            "text",
            "copy",
            "share",
            "wifi",
            "vipcard",
            "weibo",
            "remind",
            "refresh",
            "filter",
            "settings",
            "scan",
            "qrcode",
            "cascades",
            "apps",
            "sort",
            "searchlist",
            "search",
            "edit",
        ];
        const keyword = ref("");
        const list = computed(() => {
            return iconList.filter((item) => {
                return item.indexOf(keyword.value) !== -1;
            });
        });

        return {
            iconList,
            keyword,
            list,
        };
    },
};
</script>

<style scoped>
.example-p {
    height: 45px;
    display: flex;
    align-items: center;
}
.search-box {
    text-align: center;
    margin-top: 10px;
}
.search {
    width: 300px;
}
ul,
li {
    list-style: none;
}
.icon-li {
    display: inline-block;
    padding: 10px;
    width: 120px;
    height: 120px;
}
.icon-li-content {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.icon-li-content i {
    font-size: 36px;
    color: #606266;
}
.icon-li-content span {
    margin-top: 10px;
    color: #787878;
}
</style>